<template>
  <Card>
      <ButtonGroup>
          <Button type="primary" @click="showHealthBox">
              <Icon type="ios-arrow-back" />
              健康状况统计
          </Button>
          <Button type="primary" @click="showTempBox">
              体温状况统计
              <Icon type="ios-arrow-forward" />
          </Button>
      </ButtonGroup>
    <div ref="healthChart" style="width: 1000px;height:600px;" v-show="showHealth"></div>
    <div ref="tempChart" style="width: 800px;height:600px;" v-show="showTemp"></div>
  </Card>
</template>

<script>
import echarts from 'echarts'

export default {
  data(){
    return{
      health_option: {
        title: {
            text: '健康状况统计(单位：人次)'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            data: ["健康","乏力","咳嗽","发烧","疑似新冠状病毒感染","确诊新冠状病毒感染"]
        },
        yAxis: {},
        series: [{
            name: '人次',
            type: 'bar',
            data: '',
            itemStyle: {
              normal: {
  　　　　　　　　//这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
                }
              }
            }
        }]
      },
      temp_option: {
        title: {
            text: '体温状况统计(单位：人次)'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            data: ["低于36度","36度~37.3度","高于37.3"]
        },
        yAxis: {},
        series: [{
            name: '人次',
            type: 'bar',
            data: '',
            itemStyle: {
              normal: {
  　　　　　　　　//这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#2f4554','#c23531', '#61a0a8'];
                  return colorList[params.dataIndex]
                }
              }
            }
        }]
      },
      health_chart:null,
      temp_chart:null,
      showHealth:true,
      showTemp:false
    }
  },
  created(){
    
  },
  //DOM已经渲染完毕执行
  mounted(){
    //初始化数据
    this.getHealthData()
    // 基于准备好的dom，初始化echarts实例
    this.initEcharts()
    // 绘制echarts
    this.drawEcharts()
  },
  methods:{
    showHealthBox(){
      this.showHealth=true
      this.showTemp=false
    },
    showTempBox(){
      this.showHealth=false
      this.showTemp=true
    },
    async getHealthData(){
      const{data:res1} = await this.$http.get(`/health/healthData`)
      this.health_option.series[0].data=res1.data
      const{data:res2} = await this.$http.get(`/health/tempData`)
      this.temp_option.series[0].data=res2.data
    },
    initEcharts(){
      let dom1 = this.$refs.healthChart;
      this.health_chart=echarts.init(dom1);
      let dom2 = this.$refs.tempChart;
      this.temp_chart=echarts.init(dom2);
    },
    drawEcharts(){
      this.health_chart.setOption(this.health_option);
      this.temp_chart.setOption(this.temp_option);
    }
  },
  watch: {
      //监听option的变化
      health_option: {
        handler(newVal, oldVal) {
          if (this.health_chart) {
            if (newVal) {
              this.health_chart.setOption(newVal);
            } else {
              this.health_chart.setOption(oldVal);
            }
          } else {
            this.initEcharts();
          }
        },
        deep: true //对象内部属性的监听
      },
      temp_option: {
      handler(newVal, oldVal) {
        if (this.temp_chart) {
          if (newVal) {
            this.temp_chart.setOption(newVal);
          } else {
            this.temp_chart.setOption(oldVal);
          }
        } else {
          this.initEcharts();
        }
      },
      deep: true //对象内部属性的监听
      }
    }
}
</script>

<style>

</style>